<template>
  <div id="transfer">
    <div class="title1">
      <img src="../../assets/img/huazhuan.png" alt />
      <div>
        <p>划转</p>
        <p>支持otc钱包与秒合约钱包互相划转</p>
      </div>
    </div>
    <div class="toggle">
      <div class="toggle-left">
        <p>OTC钱包</p>
        <p>{{Number(otcWallet.available)+Number(otcWallet.freeze)}} USDT</p>
      </div>
      <img
        @click="imgStatus = !imgStatus"
        :class="[imgStatus?'':'imgActive']"
        src="../../assets/img/hz.png"
        alt
      />
      <div class="toggle-right">
        <p>合约钱包</p>
        <p>{{wallet}} USDT</p>
      </div>
    </div>

    <div class="deal">
      <p style="color:#344E50">转账金额</p>
      <div class="inputs">
        <input
          @input="amount=amount.replace(/[^\d.]/g,'')"
          v-model="amount"
          type
          placeholder="输入转账金额"
        />
        <span>USDT</span>
      </div>
    </div>
    <el-button style="width:280px;background-color:#E0BC8B" size="small" :loading="load" @click="transfer" type="warning">确认</el-button>
    <!-- <div :loading="load" @click="transfer" class="submit pay-btn">确认</div> -->
  </div>
</template>
<script>
import { walletTransfer, contractWalletGet, userWalletList } from "../../api/api";
import qs from "qs";
import { mapState } from "vuex";
export default {
  name: "transfer",
  data() {
    return {
      imgStatus: true,
      amount: "",
      load: false,
      wallet: "",
      otcWallet: ""
    };
  },
  computed: {
    ...mapState(["token"])
  },
  watch: {},
  created() {
    // this.getWallet();
    // this.getWalletOtc();
  },
  methods: {
    transfer() {
      if (this.amount == "") {
        this.$notify({
          title: "警告",
          message: "划转金额不能为空!",
          type: "warning"
        });
        return false;
      }
      var params = {
        token: this.token,
        amount: this.imgStatus ? this.amount : -this.amount
      };
      this.load = true;
      walletTransfer(qs.stringify(params)).then(res => {
        this.load = false;
        if (res.data.code == 200) {
          this.$notify({
            title: "提示",
            message: "划转成功！",
            type: "success"
          });
          this.$store.commit('modifyTime',new Date())
          this.getWallet();
          this.getWalletOtc();
        } else {
          this.$notify({
            title: "警告",
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    //获取钱包
    getWallet() {
      var params = {
        token: this.token
      };
      contractWalletGet(qs.stringify(params)).then(res => {
        this.wallet = res.data.data.availableAmount;
      });
    },
    //获取otc
    getWalletOtc() {
      var params = {
        token: this.token
      };
      userWalletList(params).then(res => {
        this.otcWallet = res.data.data[0];
      });
    }
  }
};
</script>
<style lang='less' scope>
// ----------------------------
#transfer {
  .title1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > div {
      padding: 0 10px;
      > p:first-child {
        font-size: 15px;
        color: #dcb884;
      }
      > p:last-child {
        font-size: 14px;
        color: #a1b1b0;
        margin-top: 5px;
      }
    }
  }
  .toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 30px 0;
    .toggle-left {
      border: 1px solid #ffd1ba;
      background-color: #fff7f3;
      width: 280px;
      padding: 25px 20px;
      background: url("../../assets/img/otcqianbao.png") no-repeat right center;
      > p:nth-child(1) {
        margin-bottom: 10px;
        font-size: 16px;
        color: #a1b1b0;
      }
      > p:nth-child(2) {
        font-size: 20px;
        color: #ff8f4e;
      }
    }
    .toggle-right {
      border: 1px solid #90bbd7;
      background-color: #f3faff;
      width: 280px;
      padding: 25px 20px;
      background: url("../../assets/img/heyueqianbao.png") no-repeat right
        center;
      > p:nth-child(1) {
        margin-bottom: 10px;
        font-size: 16px;
        color: #a1b1b0;
      }
      > p:nth-child(2) {
        font-size: 20px;
        color: #557fb7;
      }
    }
    > img {
      margin: 0 20px;
      cursor: pointer;
      transition: all 1s;
    }
    > .imgActive {
      transform: rotate(180deg);
    }
  }
  .deal {
    margin: 0 0 30px 0;
  }
  .submit {
    width: 280px;
    margin-bottom: 40px;
  }
  /* 输入框 */
  .inputs {
    width: 280px;
    margin: 15px 0;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #E6E6E6;
    
  }
  .inputs > input {
    border: 0;
    outline: none;
    color: #a1b1b0;
    font-size: 14px;
  }
  .inputs > span {
    font-size: 14px;
    color: #DCB884;
    font-weight: 300;
  }
/* 按钮 */
  .pay-btn {
    text-align: center;
    font-size: 15px;
    color: #fff;
    background-image: linear-gradient(to right, #cfa66e, #fbe0b8);
    padding: 8px 0;
    border-radius: 5px;
  }
}
</style>